<!--
 * @FileDescription 视频列表
 * @Author lz
 * @Date 20230804 14:08:37
 * @LastEditors lz
 * @LastEditTime 20230804 14:08:37
-->
<template>
    <div class="vList">
        <img src="/images/Benz600/ic_close.png" class="hi_close" @click="close">
        <img src="/images/Benz600/videotitle_bg.png" class="titIMG">
        <div class="RollingBox">
            <div class="vLBox" @click="jump(item.Path)" v-for="(item, index) in HomeContent.Default.QRList.value" :key="index">
                {{ item.Name }}
            </div>
        </div>
    </div>
    <ExternalPage v-if="HomeContent.Default.VideoBox.value"></ExternalPage>
</template>

<script setup lang="ts">
import HomeContent from '../HomeContent';
import ExternalPage from '../ExternalPage/index.vue';
import { ElMessage } from 'element-plus'
import { onMounted, reactive } from 'vue';
const state = reactive({
    VideoAddress: <any>[]
})
function close() {
    //关闭
    HomeContent.Default.VideoList.value = false
}
function jump(val: any) {
    HomeContent.Default.VideoAddress.value = val
    HomeContent.Default.VideoBox.value = true
    // ElMessage('暂无数据')
}
onMounted(() => {
    // if (HomeContent.Default.ModuleType.value == 1) {
    //     state.VideoAddress = [{
    //         name: '凸轮轴结构',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/351.mp4',
    //     }, {
    //         name: '凸轮轴拆卸',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/352.mp4',
    //     },
    //     {
    //         name: '机油泵拆卸',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/353.mp4',
    //     },
    //     {
    //         name: '散热风扇检测',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/355.mp4',
    //     }, {
    //         name: '冷却系统1',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/356.mp4',
    //     }, {
    //         name: '冷却系统2',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/357.mp4',
    //     }, {
    //         name: '冷却系统3',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/358.mp4',
    //     }, {
    //         name: '润滑系统1',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/359.mp4',
    //     }, {
    //         name: '润滑系统2',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/360.mp4',
    //     }, {
    //         name: '润滑系统3',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/361.mp4',
    //     }, {
    //         name: '发动机电控',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/365.mp4',
    //     }]
    // } else if (HomeContent.Default.ModuleType.value == 2) {
    //     state.VideoAddress = [{
    //         name: '车窗电机更换',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/337.mp4',
    //     }, {
    //         name: '车窗系统原理',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/338.mp4',
    //     }, {
    //         name: '天窗匹配编程',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/339.mp4',
    //     }, {
    //         name: '天窗应急开启',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/340.mp4',
    //     }]
    // } else if (HomeContent.Default.ModuleType.value == 3) {
    //     state.VideoAddress = [{
    //         name: '大灯模块检修',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/333.mp4',
    //     }, {
    //         name: '大灯模块匹配',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/334.mp4',
    //     }]
    // } else if (HomeContent.Default.ModuleType.value == 4) {
    //     state.VideoAddress = [{
    //         name: '大灯模块检修',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/333.mp4',
    //     }, {
    //         name: '大灯模块匹配',
    //         address: 'http://wap.jiaojumoxing.com/kechengsp/video/334.mp4',
    //     }]
    // }
})
</script>

<style scoped>
.vList {
    width: 298px;
    height: 648px;
    background-image: url('/images/Benz600/videolist_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    text-align: center;
}

.RollingBox {
    overflow-y: auto;
    width: 290px;
    height: 550px;
}

::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 3px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/

    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #02C4FF;
}

::-webkit-scrollbar-track {
    /*滚动条里面轨道*/

    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #123965;
}

.hi_close {
    width: 50px;
    position: absolute;
    right: 10px;
    top: 10px;
    transition: all 0.2s linear;
}

.hi_close:hover {
    transform: rotate(180deg);
    transition: all 0.2s linear;
}

.titIMG {
    width: 222px;
    height: 44px;
    margin-top: 30px;
}

.vLBox {
    margin: 0 auto;
    width: 260px;
    height: 48px;
    background-image: url('/images/Benz600/list_normal.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
    line-height: 48px;
    font-size: 18px;
    color: #28DCE8;
}

.vLBox:hover {
    background-image: url('/images/Benz600/list_active.png');
}
</style>